import React, { useState, useRef, useEffect } from 'react';
import './BannerSearchBox.css';

const hotKeywords = ['4K视频', '党政', '科技', '国潮', 'PPT模板', '背景', '动画', '节日', '手绘'];
const mockHistory = ['国潮', '科技', '党政'];

const BannerSearchBox: React.FC = () => {
  const [showDropdown, setShowDropdown] = useState(false);
  const [history, setHistory] = useState<string[]>(mockHistory);
  const [input, setInput] = useState('');
  const boxRef = useRef<HTMLDivElement>(null);

  // 点击外部关闭下拉
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (!boxRef.current?.contains(e.target as Node)) setShowDropdown(false);
    };
    if (showDropdown) document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [showDropdown]);

  const handleSearch = () => {
    if (!input.trim()) return;
    setHistory((prev) => {
      const arr = prev.filter(h => h !== input.trim());
      return [input.trim(), ...arr].slice(0, 8);
    });
    setShowDropdown(false);
    // 这里可跳转或发起搜索
  };

  const clearHistory = () => setHistory([]);

  return (
    <div className="banner-search-box" ref={boxRef}>
      <select className="search-select">
        <option>全部</option>
      </select>
      <input
        className="search-input"
        placeholder="搜索全站素材"
        value={input}
        onFocus={() => setShowDropdown(true)}
        onChange={e => setInput(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && handleSearch()}
      />
      <span className="search-camera" title="拍照搜索">
        {/* 可用SVG替换 */}
        <svg width="22" height="22" viewBox="0 0 1024 1024"><path d="M946.5 505c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v388c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V505c0-4.4-3.6-8-8-8zM192 400c0-4.4-3.6-8-8-8H56c-4.4 0-8 3.6-8 8v640c0 4.4 3.6 8 8 8h128c4.4 0 8-3.6 8-8V400c0-4.4-3.6-8-8-8z"/></svg>
      </span>
      <button className="search-btn" onClick={handleSearch}>
        <span className="search-icon">
          {/* 可用SVG替换 */}
          <svg width="18" height="18" viewBox="0 0 1024 1024"><path d="M946.5 505c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v388c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V505c0-4.4-3.6-8-8-8zM192 400c0-4.4-3.6-8-8-8H56c-4.4 0-8 3.6-8 8v640c0 4.4 3.6 8 8 8h128c4.4 0 8-3.6 8-8V400c0-4.4-3.6-8-8-8z"/></svg>
        </span>
        搜索
      </button>
      {showDropdown && (
        <div className="search-dropdown">
          {history.length > 0 && (
            <div className="dropdown-section">
              <div className="dropdown-title">
                搜索历史
                <span className="clear-btn" onClick={clearHistory}>清空</span>
              </div>
              <div className="dropdown-list">
                {history.map((h, i) => (
                  <div className="dropdown-item" key={i} onClick={() => setInput(h)}>
                    <span className="search-icon">🔍</span> {h}
                  </div>
                ))}
              </div>
            </div>
          )}
          <div className="dropdown-section">
            <div className="dropdown-title">热门搜索</div>
            <div className="dropdown-list hot-list">
              {hotKeywords.map((k, i) => (
                <div className="dropdown-item hot" key={i} onClick={() => setInput(k)}>
                  <span className="search-icon">🔥</span> {k}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default BannerSearchBox;
